<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<title>天气</title>
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
		<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
	</head>

	<body>
		<div class="container">
			<div class="input-group mb-3 mt-3">
				<input id="ipt" type="text" class="form-control" placeholder="请输入要查询的城市" aria-label="Recipient's username" aria-describedby="basic-addon2" ">
				<div class="input-group-append ">
					<span class="input-group-text " id="basic-addon2 " >搜索</span>
				</div>
			</div>
			<div class="city">
				<span id="city"></span>
				<span id="now"></span>
				<span id="time"></span>
				<div class="du"><span id="du"></span>℃</div>
			</div>
			<div>风向：
				<span id="wind"></span>
			</div>
			<div>穿衣指数：
				<span id="drsg"></span>
			</div>
			<h4 style="margin-top:10px;font-family: '微软雅黑';">近七日天气预报</h4>
			<ul class="seven">
				<li style="margin-left: 0;">
					<div class="top">
						<p id="aa"></p>
					</div>
					<div class="bootom">
						<p id="aa3"></p>
					<span id="aa1"></span>℃/
					<span id="aa2"></span>℃
					</div>
				</li>
				<li>
					<div class="top">
						<p id="bb"></p>
					</div>
					<div class="bootom">
						<p id="bb3"></p>
					<span id="bb1"></span>℃/
					<span id="bb2"></span>℃
					</div>
				</li>
				<li>
					<div class="top">
						<p id="cc"></p>
					</div>
					<div class="bootom">
						<p id="cc3"></p>
					<span id="cc1"></span>℃/
					<span id="cc2"></span>℃
					</div>
				</li>
				<li>
					<div class="top">
						<p id="dd"></p>
					</div>
					<div class="bootom">
						<p id="dd3"></p>
					<span id="dd1"></span>℃/
					<span id="dd2"></span>℃
					</div>
				</li>
				<li>
					<div class="top">
						<p id="ee"></p>
					</div>
					<div class="bootom">
						<p id="ee3"></p>
					<span id="ee1"></span>℃/
					<span id="ee2"></span>℃
					</div>
				</li>
				<li>
					<div class="top">
						<p id="ff"></p>
					</div>
					<div class="bootom">
						<p id="ff3"></p>
					<span id="ff1"></span>℃/
					<span id="ff2"></span>℃
					</div>
				</li>
				<li>
					<div class="top">
						<p id="gg"></p>
					</div>
					
					<div class="bootom">
						<p id="gg3"></p>
					<span id="gg1"></span>℃/
					<span id="gg2"></span>℃
					</div>
				</li>
			</ul>
		</div>

		<script type="text/javascript ">
			var city = "沧州 ";

			function loadXMLDoc() {
				if(window.XMLHttpRequest) {
					xmlhttp = new XMLHttpRequest();
				} else {
					xmlhttp = new ActiveXObject("Microsoft.XMLHTTP ");
				}
				xmlhttp.onreadystatechange = function() {
					if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
						var json = xmlhttp.responseText;
						json = JSON.parse(json);
						console.log(json);
						//日期
						document.querySelector("#time").innerHTML = json.basic.update.loc
						//城市
						document.querySelector("#city").innerHTML = json.basic.city
						//天气
						document.querySelector("#now").innerHTML = json.now.cond.txt
						//实时温度
						document.querySelector("#du").innerHTML = json.now.tmp
						//风向
						document.querySelector("#wind").innerHTML = json.now.wind.dir
						//穿衣指数
						document.querySelector("#drsg").innerHTML = json.suggestion.drsg.txt
						//七天温度
						document.querySelector("#aa").innerHTML = json.daily_forecast[0].date
						document.querySelector("#aa1").innerHTML = json.daily_forecast[0].tmp.min
						document.querySelector("#aa2").innerHTML = json.daily_forecast[0].tmp.max
						document.querySelector("#aa3").innerHTML = json.daily_forecast[0].cond.txt_d
						document.querySelector("#bb").innerHTML = json.daily_forecast[1].date
						document.querySelector("#bb1").innerHTML = json.daily_forecast[1].tmp.min
						document.querySelector("#bb2").innerHTML = json.daily_forecast[1].tmp.max
						document.querySelector("#bb3").innerHTML = json.daily_forecast[1].cond.txt_d
						document.querySelector("#cc").innerHTML = json.daily_forecast[2].date
						document.querySelector("#cc1").innerHTML = json.daily_forecast[2].tmp.min
						document.querySelector("#cc2").innerHTML = json.daily_forecast[2].tmp.max
						document.querySelector("#cc3").innerHTML = json.daily_forecast[2].cond.txt_d
						document.querySelector("#dd").innerHTML = json.daily_forecast[3].date
						document.querySelector("#dd1").innerHTML = json.daily_forecast[3].tmp.min
						document.querySelector("#dd2").innerHTML = json.daily_forecast[3].tmp.max
						document.querySelector("#dd3").innerHTML = json.daily_forecast[3].cond.txt_d
						document.querySelector("#ee").innerHTML = json.daily_forecast[4].date
						document.querySelector("#ee1").innerHTML = json.daily_forecast[4].tmp.min
						document.querySelector("#ee2").innerHTML = json.daily_forecast[4].tmp.max
						document.querySelector("#ee3").innerHTML = json.daily_forecast[4].cond.txt_d
						document.querySelector("#ff").innerHTML = json.daily_forecast[5].date
						document.querySelector("#ff1").innerHTML = json.daily_forecast[5].tmp.min
						document.querySelector("#ff2").innerHTML = json.daily_forecast[5].tmp.max
						document.querySelector("#ff3").innerHTML = json.daily_forecast[5].cond.txt_d
						document.querySelector("#gg").innerHTML = json.daily_forecast[6].date
						document.querySelector("#gg1").innerHTML = json.daily_forecast[6].tmp.min
						document.querySelector("#gg2").innerHTML = json.daily_forecast[6].tmp.max
						document.querySelector("#gg3").innerHTML = json.daily_forecast[6].cond.txt_d
					}
				}
				xmlhttp.open("GET", "https://bird.ioliu.cn/weather?city=" + city, true);
				xmlhttp.send();
			}
			loadXMLDoc();
			document.querySelector(" #ipt ").addEventListener('change', function() {
				console.log(this.value);
				city = this.value;
				loadXMLDoc();
			})
		</script>
	</body>

</html>